<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<body>
<div style="padding: 15px">
    <div class="layui-row">
        <div class="layui-col-xs6">
            <!--当月的每天，可选某个月-->
            <div id="day" style="width:600px;height:400px; margin:0 auto;"></div>
        </div>
        <div class="layui-col-xs6">
            <!--自统计日起，类别的支出情况-->
            <div id="type" style="width:600px;height:400px; margin:0 auto;"></div>
        </div>
    </div>

</div>
<div th:include="include :: footer"></div>
<script th:src="@{/frame/js/echarts.min.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var sysUrl = '/venus/project/balance';
    layui.use(['form', 'jquery', 'laydate'], function () {
        var form = layui.form, laydate = layui.laydate, $ = layui.$;
        //----------每日统计-------------//
        var myDayChart = echarts.init(document.getElementById('day'));
        myDayChart.setOption({
            title: {
                text: '按月每天收支统计',
                subtext: '账户来源：fanling'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['收支合计']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true}
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: []
            }],//日期横坐标
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '支出金额',
                type: 'bar',
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }]//纵坐标金额
        });
        var daysNames = [];//每天
        var daysMoney = [];//每天收支金额组
        $.post(sysUrl + '/charts/daysdata', function (result) {
            $.each(result.data, function (index, item) {
                daysNames.push(getDateStr(item.recordDate));
                daysMoney.push(item.money);
            });
            myDayChart.hideLoading();    //隐藏加载动画
            myDayChart.setOption({
                xAxis: [{
                    data: daysNames
                }],
                series: [{
                    data: daysMoney
                }]
            });
        });

        //----------支出类别-------------//
        var myTypeChart = echarts.init(document.getElementById('type'));
        myTypeChart.showLoading();
        myTypeChart.setOption({
            title: {
                text: '各个类别的支出情况',
                subtext: '从2018年12月3日起',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: []
            },
            series: [
                {
                    name: '支出类别',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        var typeNames = [];//类别组
        var balanceMoney = [];//收支金额组
        $.post(sysUrl + '/charts/typedata', function (result) {
            $.each(result, function (index, item) {
                typeNames.push(index);    //挨个取出类别并填入类别数组 
                balanceMoney.push({
                    name: index,
                    value: item
                });
            });
            myTypeChart.hideLoading();    //隐藏加载动画
            myTypeChart.setOption({
                legend: [{
                    data: typeNames
                }],
                series: [{
                    data: balanceMoney
                }]
            });
        });
    });
    /*]]>*/
</script>
</body>
</html>